<template>
    <div class="index">
        <Row type="flex" justify="center" align="middle">
            <Col span="24">
                <h1>
                    <img src="../images/bang.png">
                </h1>
                <h2>
                    <p class="welcome">Welcome to my demo contact App!</p>
                    <ButtonGroup>
                        <Button type="warning" @click="handle404">测试http:404</Button>
                        <Button type="primary" @click="handle500">测试http:500</Button>
                        <Button color="white" @click="goToConsole">去控制台！</Button>
                    </ButtonGroup>
                    <p style="margin-top: 20px;">
                        <!-- note @on-enter 是iview组件Input的特殊定制。在组件上用@keydown没有用 -->
                        <Input v-model.number="id"
                               style="width: 100px;"
                               @on-enter="handleGetPerson"
                               autofocus
                               clearable
                               ref="personId"/>
                        <Button @click="handleGetPerson">找这个id</Button>
                        <div class="result-window">
                            <span v-if="typeof person === 'object'">{{person.name}}, id: {{person.id}}</span>
                        </div>
                    </p>
                </h2>
            </Col>
        </Row>
    </div>
</template>
<script>

    export default {
        data: function () {
            return {
                id: 3,
                person: ''
            };
        },
        methods: {
            handle404() {
                this.$axios.get('/foobar');
            },
            handle500() {
                this.$axios.get('/menu');
            },
            handleGetPerson() {
                this.$refs['personId'].focus();
                if (typeof this.id === 'number') {
                    this.$axios.get('/person/' + this.id)
                        .then(resp => this.person = resp.data);
                }
            },
            goToConsole() {
                this.$router.push('console');
            }
        }
    };
</script>
<style scoped>
    .index {
        width: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        text-align: center;
    }

    .index h1 {
        height: 150px;
    }

    .index h1 img {
        height: 100%;
    }

    .index h2 {
        color: #666;
        margin-bottom: 200px;
    }

    .index h2 p {
        margin: 0 0 50px;
    }

    .index .ivu-row-flex {
        height: 100%;
    }

    .result-window {
        position: absolute;
        left: 50%;
        margin-left: -2em;
        margin-top: -1em;
    }

    .welcome {
        color: rgba(202, 202, 202, 0.68);
        font-weight: normal;
        font-size: small;
    }
</style>